<%@page import="uit.pubguru.model.UserModel"%>
<!--@author: Huong Tran-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="uit.pubguru.controller.CaptchaController" %>
<%@page import="uit.pubguru.controller.UserController" %>
<%@page import="uit.pubguru.constant.PubGuruConst" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Publication Guru</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/mystyle.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="javascript/jquery-1.7.1.min.js"></script>
        <script language="javascript" src="javascript/myscripts.js"></script>
    </head>

    <body>
        <div class="wrapper">
            <div class="header">
                <div class="menutop">
                    <ol>
                        <li class="headerli"> <a href="/PubGuru">Home</a> </li>
                        <li class="headerli"> <a href="/PubGuru/RankList">Rank List</a> </li>
                        <li class="headerli"> <a href="">Visual Publication Network</a> </li>
                        <li class="headerli"> <a href="">Others</a> </li>
                    </ol>
                </div>
            </div><!-- end .header -->
            <div class="content"> 
              
                <div class="searchform">
                    <div class="logo_small"> 
                        <a href="/PubGuru">
                            <img src="images/GuruOfPub_04_small.png" alt="Publication Guru"/>
                        </a>
                    </div>
                    <div class="search-bar-wrapper">
                        <div class="searchwrapper_small">
                            <input id="sk" type="text" class="searchbox_small" name="search" value="" autocomplete="off"/>
                            <input id="btSearch" type="submit" value="" />
                        </div>
                        <div style="float: right; padding-top:5px;"> <a style= "font-size:11px;" href="/PubGuru/search.adv.guru">Advanced Search</a> </div>
                    </div>
                </div><!-- end search form -->

                <div class="content_wrapper">
                     <div class="register_wrapper">
                        <form  method="POST" class="register_form" name="register_form">
                            <table style="margin: auto;" >
                                <tbody>
                                    <tr valign="top">
                                        <td class="label">Full Name</td>
                                        <td class="content">
                                            <input class="require" type="text" value="" maxlength="100" name="txt_fullname" id="txt_fullname"/><span class="require_field">*</span>                                            
                                            <div class="warning" id="fullNameLenghtWarning">
                                                Full name minimum 3 characters. 
                                            </div>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td class="label">
                                            <span id="Countrylabel" class="label2"> </span>Country
                                        </td>
                                        <td class="content">
                                            <input class="require" type="text" value="Vietnam" maxlength="100" name="txt_country" id="txt_country">                                                    
                                                <div class="warning requirewarning" id="countryWarning"> Please enter country.</div>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td class="label">
                                            Email
                                        </td>
                                        <td class="content">
                                            <input class="require email" type="text" value="" maxlength="100" name="txt_email" id="txt_email"/><span class="require_field">*</span>
                                            <div class="example">
                                                e.g. abc@gmail.com.
                                            </div>
                                            <div class="warning" id="emmailNotvalid">Please enter a valid email.</div>                                                     
                                            <div class="warning" id="emmailWarningExist">This mail have already exist.</div>                                           
                                        </td>
                                    </tr>
                                     <tr valign="top">
                                        <td class="label">
                                            Organization
                                        </td>
                                        <td class="content">
                                            <input class="require org" type="text" value="" maxlength="100" name="txt_org" id="txt_org"/><span class="require_field">*</span>
                                            <div class="example">
                                                e.g. University of Information Technology.
                                            </div>

                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td class="label">
                                            Password
                                        </td>
                                        <td class="content">
                                            <input type="password" value="" class="longblock" maxlength="1000" name="txt_password" id="txt_password"/><span class="require_field">*</span>                                                    
                                            <div class="warning" id="requireWarning">Please enter password.</div>
                                            <div class="warning" id="passwordShortWarning">Password is least 6 characters.</div>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td class="label">
                                            Confirm Password
                                        </td>
                                        <td class="content">
                                            <input class="require" type="password" value="" class="longblock" maxlength="1000" name="txt_confirmpass" id="txt_confirmpass"/>                                                   
                                            <div class="warning" id="confirmPasswordWarning">Confirm password don't match.</div>
                                        </td>
                                    </tr>

                                    <tr valign="top">
                                        <td class="label">
                                            Input Code
                                        </td>
                                        <td class="content">
                                            <div id="img_captcha" >
                                                <img src=<%=PubGuruConst.HTTP_SERVER + "/CaptchaController"%>>
                                            </div>
                                            <input style="width: 148px;" class="input_captcha" type="text" id="txt_code" name="txt_code"/>
                                            <span class="warning requirewarning " id="codeWarning">Code don't match. </span>
                                        </td>
                                    </tr>                                        

                                    <tr valign="top">
                                        <td valign="middle" colspan="2" >
                                            <div id="submit_button">                                                        
                                                <input id="submitbutton_cancle" name="action" type="submit" value="cancel" class="g_button g_button_submit"/>
                                                <input id="submitbutton_complete" name="action" type="submit" value="complete" class="g_button g_button_submit"/>
                                                <span id="register_loading"></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody></table>      
                        </form>
                     </div>
                </div><!-- end content_wrapper-->
            </div><!-- end .content -->
        </div><!-- end .wrapper -->
        <div class="push"></div>
        <div class="footer">
            <center>
                <ol>
                    <li class="footerli"> <a href="">Help</a> | </li>
                    <li class="footerli"> <a href="">FAQ</a> | </li>
                    <li class="footerli"> <a href="">About</a> | </li>
                    <li class="footerli"> <a href="">Contact</a> | </li>
                    <li class="footerli"> <a href="">Privacy Statement</a> <a><strong> - 2011 All rights reserved </strong></a> </li>
                </ol>
            </center>
            <!-- end .footer --></div>

    </body>
    <script>
        //////////////
        $("#submitbutton_complete").click(function(){            
            if(!validate()){               
                return false;
            }
            var data = $("form[name='register_form']").serialize();
            data += "&action=Register";           
            $("#register_loading").html('<a class="tool-24 loading"><a>');
            $.ajax({
                type: "POST",
                url: "UserController",
                data: data,
                success: function(msg){                    
                    $("#register_loading").html('');
                    if(msg=="-1"){
                        $("#emmailWarningExist").show();//email exist                        
                        refreshCapcha();
                    }else if(msg=="-2"){// full name too short
                        $("#fullNameLenghtWarning").show();
                    }else if(msg=="-3"){
                        $("#passwordShortWarning").show();
                    }else if(msg=="0"){
                        $("#codeWarning").show();//captcha don't match
                    }else if(msg=="1"){
                        window.location.replace("result.jsp");
                    }
                },
                error: function(){
                    alert("Error");
                }
            });
            return false;
        });
        ///////////
        $("#submitbutton_cancle").click(function(){
            window.location.replace("login.jsp");
            return;
        });
        ////////////
        function refreshCapcha(){
            $.ajax({
                type: "POST",
                url: "CaptchaController",
                success: function(msg){
                    $("div#img_captcha").html("<img src=<%=PubGuruConst.HTTP_SERVER + "/CaptchaController"%>>");
                }
            });
        }
      
        function validate(){
            var test = true;
            $(".warning").hide();
            
            //vaidate fullname
            var full_name = $("#txt_fullname").val();
            if(full_name.length < 3){
                test = false;
                $("#fullNameLenghtWarning").show();
                
            }
            
            //vaidate password field            
            var txt_pass = $("#txt_password").val();
            if(txt_pass.length == 0 ){
                test = false;
                $("#requireWarning").show();
            }else if(txt_pass.length<6){
                test = false;
                $("#passwordShortWarning").show();      
            }else if(txt_pass!= $("#txt_confirmpass").val()){
                test = false;
                $("#confirmPasswordWarning").show();
            }
            //validate email
            var txt_email = $("#txt_email").val();
            if(!emailCheck(txt_email)){
                test = false;
                $("#emmailNotvalid").show();
            }
            //vaidate require field
            var arr_inputs = $("form[name='register_form']").find("input"); 
            arr_inputs.each( function(){                    
                if($(this).hasClass("require") && $(this).val()==""){
                    test = false;
                    var warning = $(this).parent().find(".requirewarning");                    
                    $(this).parent().find(".requirewarning").show();
                }
            });
            return test;
        }
        
    </script>
</html>
